<template>
    <view class="address">
        <view class="address_box">
            <view
                class="address_item card"
                v-for="(item, index) in addressList"
                :key="index"
                @click="save(item)"
            >
                <view class="address_item_top">
                    <view class="name_mobile">
                        <view class="name">{{ item.name }}</view>
                        <view class="mobile">{{ item.mobile }}</view>
                        <view class="default" v-if="item.default == 1">默认</view>
                    </view>
                    <view class="edit_del">
                        <image
                            @click.stop="edit(item.id)"
                            :src="BaseUrl + '/static/common/bj.png'"
                            mode="scaleToFill"
                        />
                        <image
                            @click.stop="del(item.id)"
                            :src="BaseUrl + '/static/common/sc.png'"
                            mode="scaleToFill"
                        />
                    </view>
                </view>
                <view class="address_item_bottom">
                    <view class="address_info">
                        {{ item.formatted_address + " " }}
                        {{ item.address }}
                    </view>
                </view>
            </view>
            <u-empty text="暂无收货地址" v-if="addressList.length == 0" mode="list"></u-empty>
        </view>
        <button class="add_address" @click="add">新增收货地址</button>
    </view>
</template>
<script>
import { BaseUrl } from "../../utils/req.js";
export default {
    data() {
        return {
            BaseUrl: BaseUrl,
            addressList: [
            ],
            city: "", //是否返回订单
        };
    },

    onShow() {
        this.getAddressList();
    },
    onLoad(options) {
        this.city = options.city;
    },
    methods: {
        save(item) {
            uni.setStorageSync("address", item);
            if (this.city == "'地址'") {
                uni.navigateBack({ delta: 1 });
            }
        },
        //获取
        async getAddressList() {
            await uni.request({
                url: BaseUrl + "/api/wanlshop.address/getaddress",
                method: "GET",
                header: {
                    token: uni.getStorageSync("token"),
                },
                success: (res) => {
                    this.addressList = res.data.data.data;
                    uni.setStorageSync("address", this.addressList[0]);
                },
            });
        },
        //新增
        add() {
            uni.navigateTo({
                url: "/liu/pages/addAddress",
            });
        },
        //编辑
        edit(id) {
            uni.navigateTo({
                url: "/liu/pages/addAddress?id=" + id,
            });
        },
        //删除
        del(id) {
            // 弹窗确认
            uni.showModal({
                title: "提示",
                content: "是否删除该地址",
                success: (res) => {
                    if (res.confirm) {
                        uni.request({
                            url: BaseUrl + "/api/wanlshop.address/deladdress",
                            method: "POST",
                            header: {
                                token: uni.getStorageSync("token"),
                            },
                            data: {
                                id: id,
                            },
                            success: (res) => {
                                uni.showToast({
                                    title: "删除成功",
                                    icon: "none",
                                });
                                this.getAddressList();
                            },
                        });
                    }
                    if (res.cancel) {
                        console.log("用户点击取消");
                    }
                },
            });
        },
    },
};
</script>
<style lang="scss" scoped>
.address {
    width: 100%;
    height: 100vh;
    padding: 0 30rpx;
    margin: 20rpx 0;
    box-sizing: border-box;
    .address_box {
        width: 100%;
        .card {
            width: 100%;
            background: #fff;
            border-radius: 16rpx;
            padding: 20rpx;
            margin-bottom: 20rpx;
        }
        .address_item {
            .address_item_top {
                display: flex;
                justify-content: space-between;
                align-items: center;
                .name_mobile {
                    display: flex;
                    align-items: center;
                    .name {
                        font-size: 30rpx;
                        font-weight: bold;
                    }
                    .mobile {
                        font-size: 28rpx;
                        margin-left: 10rpx;
                        color: #888;
                    }
                    .default {
                        font-size: 22rpx;
                        margin-left: 10rpx;
                        padding: 6rpx 10rpx;
                        border-radius: 14rpx;
                        line-height: 24rpx;
                        color: #fff;
                        background: linear-gradient(90deg, #00a67a, #057748);
                    }
                }
                .edit_del {
                    display: flex;
                    align-items: center;
                    image {
                        width: 30rpx;
                        height: 30rpx;
                        margin: 0 0 0 30rpx;
                    }
                }
            }
            .address_item_bottom {
                margin: 20rpx 0;
                .address_info {
                    font-size: 28rpx;
                    width: 80%;
                    line-height: 1.4em;
                    color: #666666;
                }
            }
        }
    }
    .add_address {
        height: 80rpx;
        line-height: 80rpx;
        background: linear-gradient(90deg, #00a67a, #057748);
        position: absolute;
        bottom: 4vh;
        border-radius: 40rpx;
        width: calc(100% - 60rpx);
    }
}
</style>
